<template>
	<view class="content-box">
		<swiper class="swiper-zjr" circular vertical :autoplay="autoplay" interval="2000">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item">
					<image class="name" :src="item.headUrl"></image>
					<text class="name">{{ item.nickname | strCeptTwo }}</text>
					<text class="name">{{item.goodsName | strCeptEleven}}</text>
					<!-- <text class="name">{{item.level==1?'传说':item.level==2?'史诗':item.level==3?'稀有':item.level==4?'尊贵':'未知'}}款</text> -->
					<image :src="item.goodsImageUrl" mode="heightFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"my-notice",
		props: {
			list: {
				type: Array
			},
			autoplay:{
				type: Boolean,
				default:true
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.content-box{
	width: 100%;
	.swiper-zjr {
		width: 100%;
		height: 100rpx;
		.swiper-item {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			background: rgba(0, 0, 0, 0.2);
			color: white;
			font-size: 26rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 20rpx;
			.name{
				margin-right: 8rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
	}
}
</style>